<template>
    <div>
        <div class="img"></div>
        <el-form :model="login" :rules="rules" ref="ruleForm" class="loginContainer">
        
            <h2>系统登陆</h2>
        
            <el-form-item  prop="username">
                <el-input v-model="login.username" autocomplete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item  prop="password" >
                <el-input v-model="login.password" type="password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item  prop="code">
                <el-input v-model="login.code"  placeholder="点击图片更换验证码" style="width: 320px; margin-right: 10px"></el-input>
                <img :src="codeUrl" @click="updateUrl()">
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="checked">记住我</el-checkbox>
            </el-form-item>
            <el-form-item>               
                <el-button type="primary" @click="submitLogin()" style="width: 100%">登录</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>


<script>
export default {
    
    name: 'Login',
    data() {
        return {
            codeUrl: '/verCode?time=' + new Date().getTime(),
            login: {
                username: '',
                password: '',
                code: '',
            },
            account: {
                username: '',
                password: '',
            },
            checked: false,
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ]
            }
        }
    },
    created(){
        this.fillingLogin();
    },
    methods: {
        fillingLogin() {
            if(window.localStorage.getItem('account')){
                this.login = JSON.parse(window.localStorage.getItem('account'));
                this.checked = true;
            }
        },
        updateUrl() {
            this.codeUrl = '/verCode?time=' + new Date().getTime();
        },
        submitLogin() {

            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    //验证通过记住密码和用户名
                    if(this.checked){
                        this.account.username = this.login.username;
                        this.account.password = this.login.password;
                        window.localStorage.setItem('account',JSON.stringify(this.account));
                    }
                    this.$post('/login', this.login).then(res => {
                        if(res){
                            var tokenStr = res.data.tokenHead + res.data.token;
                            window.sessionStorage.setItem('tokenStr', tokenStr);

                            //页面跳转
                            var path = this.$route.query.redirect ;
                            this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
                            console.log(res)
                        }
                        // this.updateUrl();
                    });
                } else {
                    this.$message.warning('请检查表单是否填写完整');
                    this.updateUrl();
                    return false;
                }
            });
        }
    }

}
</script>

<style>

.loginContainer {
    border-radius: 15px;
    background-clip: padding-box;
    width: 400px;
    margin: 200px auto;
    border: 1px solid #eaeaea;
    padding: 30px 35px 30px 35px;
    background: #fff;
    box-shadow: 0 0 25px #cac6c6;
    position: absolute;
    top: 10%;
    left: 40%;
}

.el-form-item__content{
    display: flex;
    align-items: center;
}
h2{
    text-align: center;
}
.img{

 position: fixed;
 left: 0;
 top: 0;
 width: 100%;     
 height: 100%;   
 background: url(../assets/img/a.jpg)no-repeat scroll 50% 0 transparent;
 background-size:100% 100%;

}
</style>